<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leafletdemo</title>
    <link rel="stylesheet" href="../css/leaflet.css">
    <script src="../js/leaflet-src.js"></script>
    <style>
        body,html{height:100%;}
        #mapdiv1{
            width: 50%;
            height:100%;
            float: right;
        }
        #mapdiv2{
            float: left;
            width: 50%;
            height:100%;
        }
    </style>
</head>
<body>
<div id="mapdiv1"></div>
<div id="mapdiv2"></div>
<script>
    var map1 = L.map("mapdiv1").setView([51.505, -0.09],13);
    var map2 = L.map('mapdiv2').setView([51.505, -0.09], 13);

    var lay1 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}
    );
    var lay2 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});

    lay1.addTo(map1);
    lay2.addTo(map2);


    var maps=[map1,map2];
    //地图联动实现
    function maplink(e){
        var _this=this;
        maps.map(function(t){
            t.setView(_this.getCenter(),_this.getZoom())
        })
    }
    //绑定
    maps.map(function (t){
        t.on({drag:maplink,zoom:maplink})
    })

</script>
</body>
</html>
